<template>
  <div id="login" ref="login">
    <div class="goBack">
      <van-icon name="arrow-left" @click="goback" />
    </div>
    <div class="icon-flag">
      <img src="../../images/regis_one.png" alt />
    </div>
    <div class="regis-body">
      <div class="inner-top_form">
        <div class="username">
          <input type="text" placeholder="请输入账号" v-model="username"/>
          <span></span>
        </div>
        <div class="password">
          <input type="text" placeholder="请输入密码" v-model="password"/>
          <span></span>
        </div>
      </div>
      <!-- 登录按钮 -->
      <div class="login-btn" @click="loginUser">登录</div>
      <!-- 忘记密码？ 注册 -->
      <div class="forget-psd_regis">
        <a href class="forget">忘记密码？</a>
        <span>
          还没有账户？
          <a href @click.prevent="goRegister">注册</a>
        </span>
      </div>
    </div>
    <!-- 第三方登录 -->
    <div class="foreign-login">
      <div class="top_flag">
        <span>第三方登录</span>
      </div>
      <!-- login-foreign -->
      <div class="bottom_login">

      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
        username:"",
        password:""
    };
  },
  methods: {
    changeBackgroundColor() {
      this.$nextTick(() => {
        let H = window.screen.height;
        console.log(H);
        this.$refs.login.style.height = H + "px";
      });
    },
    goback() {
      this.$router.go(-1);
      this.$store.commit("changeTabBarHidden");
    },
    goRegister(){
        this.$router.push("/register")
    },
    //请求登陆
    loginUser(){
        this.$http.get(`http://172.20.10.4:5000/login?username=${this.username}&password=${this.password}`)
        .then(r=>{
            let body =r.body;
            if(body.code == 200){
                this.$toast.success('登录成功！');
                setTimeout(()=>{
                    //登录成功把返回过来的用户名写入内存
                    let data = body.data;
                    localStorage.setItem("users",JSON.stringify(data));
                    //登录成功跳转到首页
                    this.$router.push("/home");
                    //显示底部导航
                    this.$store.commit("changeTabBarHidden")
                    //底部导航索引跳转到0
                    this.$store.commit("changeActive");
                    // 清除toast提示
                    this.$toast.clear()
                },2000)
            }else if(body.code==500){
               this.$toast.fail('用户名或密码错误！');
            }
        })
    }
  },
  created() {
    //判断进入register路由隐藏底部
    this.$store.commit("changeTabBarShowSecond", this.$route.path);
    //设置盒子高度
    this.changeBackgroundColor();
  }
};
</script>
<style lang="less" scoped>
#login {
  width: 100%;
  height: 100%;
  background-color: #e83632;
  .goBack {
    padding-top: 0.7rem;
    .van-icon {
      font-size: 0.6rem;
      color: #ffff;
      margin-left: 0.2rem;
    }
  }
  .icon-flag {
    width: 2.56rem;
    height: 2.56rem;
    margin: 0.3rem auto;
    margin-bottom: 1.2rem;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .regis-body {
    .inner-top_form {
      width: 5rem;
      margin: 0 auto;
      .username {
        position: relative;
        input {
          width: 100%;
          height: 1rem;
          margin-bottom: 0;
          border-bottom: 0.03rem solid #ccc;
          border-top-left-radius: 0.1rem;
          border-top-right-radius: 0.1rem;
          border-bottom-left-radius: 0;
          border-bottom-right-radius: 0;
          color: #1e2625;
          padding-left: 0.8rem;
        }
        span {
          display: block;
          position: absolute;
          width: 0.63rem;
          height: 0.65rem;
          background: url("../../images/regis-person.png") no-repeat center
            center;
          background-size: 0.63rem 0.65rem;
          top: 0.15rem;
          left: 0.1rem;
        }
      }
      .password {
        position: relative;
        input {
          width: 100%;
          height: 1rem;
          margin-bottom: 0;
          margin-top: -0.01rem;
          border-top-left-radius: 0;
          border-top-right-radius: 0;
          border-bottom-left-radius: 0.1rem;
          border-bottom-right-radius: 0.1rem;
          color: #1e2625;
          padding-left: 0.8rem;
        }
        span {
          display: block;
          position: absolute;
          width: 0.55rem;
          height: 0.66rem;
          background: url("../../images/regis-psd.png") no-repeat center center;
          background-size: 0.55rem 0.66rem;
          top: 0.15rem;
          left: 0.1rem;
        }
      }
    }
    .login-btn {
      width: 5rem;
      height: 1rem;
      text-align: center;
      line-height: 1rem;
      background-color: rgba(0, 0, 0, 0.4);
      margin: 0 auto;
      color: #fff;
      border-radius: 0.1rem;
      font-size: 0.4rem;
      font-weight: 700;
      margin-top: 0.35rem;
    }
    .login-btn:active {
      background-color: rgba(0, 0, 0, 0.2);
    }
    .forget-psd_regis {
      margin: 0 auto;
      width: 5rem;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      padding-top: 0.3rem;
      a {
        color: #fff;
        font-size: 0.24rem;
        text-decoration: underline !important;
      }
      span {
        color: #fff;
        font-size: 0.24rem;
      }
    }
  }
  .foreign-login {
    margin-top: 1.5rem;
    .top_flag {
      width: 3.6rem;
      height: 0.6rem;
      border-top: 0.01rem solid #fff;
      margin: 0 auto;
      position: relative;
      span {
        color: #fff;
        font-size: 0.24rem;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: -0.2rem;
        background-color: #e83632;
      }
    }
    .bottom_login{
        width: 4.87rem;
        height: 0.92rem;
        background: url('../../images/weixin-QQ.png') no-repeat center center;
        background-size: 4.87rem 0.92rem;
        margin: 0 auto;
    }
  }
}
</style>
